<template>
  <NModal :show="show" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia">
      <MacHeader
        :title="title"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <NScrollbar style="max-height: 80vh">
          <div style="padding-left: 5px">
            <NForm ref="formRef" :model="queryForm" :rules="rules">
              <NFormItem label="类型" path="type">
                <NRadioGroup v-model:value="queryForm.type">
                  <NSpace>
                    <NRadio
                      v-for="item in menuTypeEnum"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </NRadio>
                  </NSpace>
                </NRadioGroup>
              </NFormItem>
              <NFormItem label="上级id" path="parentId">
                <NTreeSelect
                  v-model:value="queryForm.parentId"
                  :options="treeOptions"
                  label-field="metaTitle"
                  key-field="id"
                  children-field="children"
                />
              </NFormItem>
              <NFormItem label="菜单名称" path="metaTitle">
                <NInput
                  v-model:value="queryForm.metaTitle"
                  placeholder="请输入"
                />
              </NFormItem>
              <template v-if="queryForm.type === 0">
                <NFormItem label="Name" path="name">
                  <NInput v-model:value="queryForm.name" placeholder="请输入" />
                </NFormItem>
                <NFormItem label="Path" path="path">
                  <NInput v-model:value="queryForm.path" placeholder="请输入" />
                </NFormItem>
                <NFormItem label="文件路径" path="component">
                  <NInput
                    v-model:value="queryForm.component"
                    placeholder="请输入"
                  />
                </NFormItem>
                <NFormItem label="详情">
                  <NSwitch v-model:value="queryForm.isPage" />
                </NFormItem>
                <NFormItem label="图标">
                  <IconSelector v-model="queryForm.metaIcon" />
                </NFormItem>
              </template>
              <template v-else>
                <NFormItem label="权限标识" path="permission">
                  <NInput
                    v-model:value="queryForm.permission"
                    placeholder="请输入"
                  />
                </NFormItem>
              </template>
              <NFormItem>
                <div class="tools w-full">
                  <NButton
                    type="primary"
                    attr-type="button"
                    @click="handleValidateClick"
                  >
                    <span>提交</span>
                  </NButton>
                </div>
              </NFormItem>
            </NForm>
          </div>
        </NScrollbar>
      </div>
    </div>
  </NModal>
</template>
<script setup lang="ts">
import { ref, inject, computed } from 'vue'
import { useFullscreen } from '@vueuse/core'
import type { TreeSelectOption, FormInst, FormRules } from 'naive-ui'
import {
  NButton,
  useMessage,
  NModal,
  NForm,
  NFormItem,
  NInput,
  NRadioGroup,
  NSpace,
  NRadio,
  NTreeSelect,
  NSwitch,
  NScrollbar
} from 'naive-ui'
import routerApi from '@/service/api/router'
import MacHeader from '@/components/codeBlock/MacHeader'
import menuTypeEnum from '@/enum/menuTypeEnum'
import IconSelector from '@/components/nComponents/IconSelector'
const props = defineProps({
  treeData: {
    type: Array<TreeSelectOption>,
    required: true
  }
})
const $clone = inject('$clone') as <T>(data: T) => T
const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const show = ref(false)
const title = ref('添加')
const toast = useMessage()
const emit = defineEmits(['success'])
const queryForm: any = ref({
  type: 1,
  permission: '',
  parentId: '',
  metaTitle: '',
  name: '',
  path: '',
  component: '',
  isPage: false,
  metaIcon: ''
})
const getItem = (el: TreeSelectOption): TreeSelectOption => {
  if (el.children) {
    if (el.children.length > 0) {
      el.children = el.children.map((item: TreeSelectOption) => {
        return getItem(item)
      })
    } else {
      delete el.children
    }
  }
  return el
}
const treeOptions = computed(() => {
  return [
    {
      id: 0,
      metaTitle: '根目录',
      children: props.treeData.map((el: TreeSelectOption) => {
        return getItem(el)
      })
    }
  ]
})
const formRef = ref<FormInst | null>(null)
const rules: FormRules = {
  metaTitle: [
    {
      required: true,
      message: '请输入标题',
      trigger: 'blur'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入Name',
      trigger: 'blur'
    }
  ],
  path: [
    {
      required: true,
      message: '请输入path',
      trigger: 'blur'
    }
  ],
  component: [
    {
      required: true,
      message: '请输入文件路径',
      trigger: 'blur'
    }
  ],
  permission: [
    {
      required: true,
      message: '请输入权限标识',
      trigger: 'blur'
    }
  ]
}
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate(errors => {
    if (!errors) {
      save()
    }
  })
}

const save = async () => {
  if (!queryForm.value.parentId) {
    queryForm.value.parentId = 0
  }
  const params = $clone(queryForm.value)
  if (params?.id) {
    const { code, message } = await routerApi.edit(params)
    if (code !== 200) {
      toast.error(message)
      return
    }
    toast.success('编辑成功')
  } else {
    const { code, message } = await routerApi.add(params)
    if (code !== 200) {
      toast.error(message)
      return
    }
    toast.success('添加成功')
  }
  emit('success')
  close()
}
const close = () => {
  queryForm.value = {
    type: 1,
    permission: '',
    parentId: '',
    metaTitle: '',
    name: '',
    path: '',
    component: '',
    isPage: false,
    metaIcon: ''
  }
  show.value = false
}

const open = (row?: any) => {
  title.value = '添加'
  if (row) {
    queryForm.value = $clone(row)
    console.log(queryForm.value)
    title.value = row?.id ? '编辑' : '添加'
  }
  show.value = true
}

defineExpose({
  open
})
</script>

<style scoped lang="scss"></style>
